<template>
	<div class="sidebar" :class="{'active':menuOut}">
		<el-menu :default-active="$route.path" class="el-menu-vertical-demo" unique-opened router>
			<template v-for="item in items">
				<template v-if="item.children">
					<el-submenu :index="item.path">
						<template slot="title">
							<svg class="icon" aria-hidden="true">
								<use :xlink:href="'#'+item.icon"></use>
							</svg>
							{{ item.name }}
						</template>
						<el-menu-item v-for="(subItem,i) in item.children" :key="i" :index="subItem.path" v-if="!subItem.hidden">
							{{ subItem.name }}
						</el-menu-item>
					</el-submenu>
				</template>
				<template v-else>
					<el-menu-item :index="item.path">
						<svg class="icon" aria-hidden="true">
							<use :xlink:href="'#'+item.icon"></use>
						</svg>
						{{ item.name }}
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script>
import menuRouter from "../router/config.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      items: menuRouter
    };
  },
  computed: {
    ...mapGetters(["menuOut"])
  }
};
</script>

<style lang="scss">
.sidebar {
  display: block;
  position: fixed;
  width: 180px;
  left: 0;
  top: 60px;
  z-index: 100;
  bottom: 0;
  transition: 0.5s all;
  overflow-y: auto;
  overflow-x: hidden;
  .el-submenu .el-menu-item {
    height: 40px;
    line-height: 40px;
  }

  > ul {
    height: 100%;
    .el-submenu__icon-arrow {
      opacity: 1;
      transition: 0.5s all;
    }
    .icon {
      margin-right: 10px;
      width: 16px;
      height: 16px;
    }
  }
  .user-info {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    opacity: 1;
    transition: 0.5s all;
    .user-cover {
      width: 60px;
      height: 60px;
      border: 3px solid #ccc;
      border-radius: 50%;
    }
    .user-name {
      color: #fff;
      margin-left: 10px;
    }
  }
  &:hover.active {
    width: 180px;
    background: #324157;
    > ul {
      .el-submenu__icon-arrow {
        opacity: 1;
      }
    }
    .user-info {
      height: 100px;
      opacity: 1;
    }
  }
  &.active {
    width: 40px;
    overflow: hidden;
    > ul {
      height: 100%;
      .el-submenu__icon-arrow {
        opacity: 0;
      }
    }
    .user-info {
      height: 0;
      opacity: 0;
    }
  }
  .el-menu-item.is-active {
    background: #48576a;
    color: #fff;
  }
}
</style>
